<template>
	<view class="dividend-page">
		<u-navbar
			title="分红池"
			autoBack 
			leftIconColor="#fff"
			:titleStyle="{ color: '#fff' }"
			bgColor="transparent"
		></u-navbar>
		<view class="top-box">
			<image class="bg" src="/static/dividend.jpg" mode="widthFix"></image>
			<view class="box">
				<view class="title">平台当前分红池({{ config.trade_currency }})</view>
				<view class="value">68</view>
				<view class="people">2人参与分红</view>
			</view>
			<view class="data">
				<view class="item">
					<view class="label">平台累计分红({{ config.trade_currency }})</view>
					<view class="value">2302</view>
				</view>
				<view class="item">
					<view class="label">我参与分红(次)</view>
					<view class="value">0</view>
				</view>
				<view class="item">
					<view class="label">我获得分红({{ config.trade_currency }})</view>
					<view class="value">0</view>
				</view>
			</view>
		</view>
		<view class="tabs-box">
			<view class="item" :class="{ 'active': tabCurrent == 0 }" @click="tabChange(0)">进行中(0)</view>
			<view class="item" :class="{ 'active': tabCurrent == 1 }" @click="tabChange(1)">待分红(0)</view>
			<view class="item" :class="{ 'active': tabCurrent == 2 }" @click="tabChange(2)">已完成(0)</view>
		</view>
		<view class="list-box">
			<view class="item">
				<view class="left">
					<view class="title">分红</view>
					<view class="time">2025-01-08 16:01</view>
				</view>
				<view class="value">+10</view>
			</view>
		</view>
		<view class="empty-box">
			<u-empty mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				tabCurrent: 0,
			}
		},
		methods: {
			tabChange (index) {
				this.tabCurrent = index
			}
		}
	}
</script>

<style lang="scss">
.dividend-page {
	.top-box {
		position: relative;
		.bg {
			width: 750rpx;
			height: 680rpx;
		}
		.box {
			position: absolute;
			bottom: 250rpx;
			left: 0;
			right: 0;
			z-index: 10;
			text-align: center;
			.title {
				color: #e0dafc;
				font-size: 26rpx;
			}
			.value {
				color: #ffdb80;
				font-size: 66rpx;
			}
			.people {
				margin-top: 10rpx;
				color: #fff;
				font-size: 32rpx;
			}
		}
		.data {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 10;
			padding: 0 40rpx;
			height: 134rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item {
				color: #fff;
				.label {
					font-size: 24rpx;
				}
				.value {
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
	}
	.tabs-box {
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: center;
		.item {
			width: 200rpx;
			height: 80rpx;
			color: #000;
			font-size: 30rpx;
			text-align: center;
			line-height: 80rpx;
			position: relative;
			&.active {
				font-weight: bold;
				&::before {
					content: '';
					display: block;
					width: 62rpx;
					height: 6rpx;
					border-radius: 6rpx;
					background-color: #333;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.list-box {
		padding: 24rpx;
		.item {
			padding: 20rpx;
			border-radius: 16rpx;
			background-color: #fff;
			box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
			display: flex;
			align-items: center;
			justify-content: space-between;
			&:not(:last-child) {
				margin-bottom: 20rpx;
			}
			.left {
				flex: 1;
				.title {
					font-size: 28rpx;
				}
				.time {
					margin-top: 16rpx;
					color: #666;
					font-size: 24rpx;
				}
			}
			.value {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.empty-box {
		margin-top: 160rpx;
	}
}
</style>
